整理內容來自 偷米騎巴哥

Why Learn?

• 前後端經常合作，必須聽懂他們的語言
• 釐清責任歸屬
• 了解瀏覽器運作原理

HTTPS

• SSL 加密
• 簡單來說就是用加密演算法以混淆輸送中的資料，防止駭客資料在連線發送時被攔截破解。
• 什麼是 SSL、TLS 以及 HTTPS？

HTTP Header (傳送內容以外的資訊)

• 當發送 GET/POST 請求後，除了資料內容之外，還需附上表頭來紀錄各種資料/設定
• HTTP Header Wiki
• 一定放在內容前面
• 內容格式 (圖檔、文字)
• 內容大小 可用來推估下載要耗多久時間
• 多久過期 快取機制

HTTP Body (資料內容)

• 存放內容: HTML,JS,圖檔...等
• 內容不一定是HTML，但HTML一定是內容之一

如何查看 Header

• Chrome DevTools / Network Tab
• 重新整理後，每個檔案皆為請求
• 右側有 Headers / Preview / Response 可查看
• Preview 會以瀏覽器能解析的方式呈現
• Response 則將內容以純文字呈現
• Headers view source 可看更多細節

Fiddler (監控HTTP工具)

• 監控電腦所發送/接收的 HTTP Request 內容
• 下載於最下面

GET / POST

• GET: 有限制大小 (明信片)
• GET 會將要傳遞的參數寫在網址上

Ex: url/?h1=zh-TW&pli=1 (用&連結不同參數)

• POST: 會將要傳的參數寫在 Content (包裹)

HTTP Header 種類

• Request Header 客戶端要求伺服器時傳送
• Response Header 伺服器回應客戶端時傳送
• 有發送請求，就必會有回應 (只要伺服器正常運作)

共通 Header 設定

• Request & Response Header 都會有的共通設定
• Request Method : GET/POST
• Status Code: 狀態碼
• Date: 瀏覽器/伺服器 當前時間
• Upgrade: 升級到另外一個協定 (Ex: websocket)
• Content-Type: 指傳送內容的格式 (常見格式如下)
• Content-length: 傳送內容大小 (可用於計算下載耗時/進度)
• Content-Encoding: 內容壓縮格式 (通常為 gzip)

    // 一般表單欄位
    application/x-www-form-urlencoded 
    // 檔案上傳
    multipart/form-data; boundary=--xxx 
    // JSON資料
    application/json 
    // 純文字
    text/plain 

WebSocket (雙向溝通)

• Header 傳送 Upgrade: websocket
• 伺服器回應 101 切換協定
• 建立一個保持連線的狀態，連線會更即時、更快速
• 建立雙向的通道，可任意的作資料傳遞
• 即不需要送一個 request 即回一個 response，可一直丟
• 伺服器能承受的連線數量要很高，通常會作 load balance

Request Header

• Request URL 請求資源的位置

• Host: 瀏覽器存取的 Host 名稱 (不可省)
  因為一個IP可以綁定多個 Domain，必須知道要對應的伺服器。

• User-Agent: 瀏覽器名版本 & 作業系統名版本

• Connection: keep-alive (保持連線不斷掉)
  建立&關閉連線相當耗時，保持連線，減少重新連接TCP次數，可以有效提高傳輸效率。

• If-Modified-Since: 快取時間 (用來判斷是否要更新內容)

• Cookie (每次請求都會發送瀏覽器的cookie，下詳)

• Authorization HTTP連線的身分驗證

• Referer: 紀錄瀏覽器前一個頁面的網址
  可用於行銷，來判斷從哪裡點入的 (不可靠，可被串改)

    // Accept 類可用 q=0.5 來配置優先取得的權重
    Accept: text/html (能接受檔案類型)
    Accept-Language: zh-TW (能接受的語言)
    Accept-Encoding: gzip (能支援的壓縮格式)

Cookie

• 用來紀錄狀態 (Ex:登入)
• 每一個 request 都會傳送一份 cookie 回伺服器 (即使傳圖片也會傳)
• 因此 cookie 不要設太大，不然會造成資源浪費
• LocalStorage 則不會被傳送到伺服器去，用來放不需要回傳給伺服器的資料

Response Header

• Etag: 產生檔案的 Hash Code，紀錄檔案是否變更
• Last-Modified: 回傳檔案修改的時間 (原理同 If-None-Match)

    // Etag 會做的事
    要求瀏覽器請求時回傳 If-None-Match 的 Header 
    If-None-Match 會根據 Hash Code 判斷檔案是否有更動
    沒有改變: 回傳304(叫他使用快取的內容)，回傳不包含 content
    有改變:   回傳200，給予新的內容

• Catch-Control: 快取檔案的策略
  max-age 設定該檔案有效的快取秒數，過期則要求新的
  no-cache 不使用快取
• Location: 當狀態碼是301或302時，瀏覽器重新導向的目標位置
• Content-Disposiiotn: 讓瀏覽器可以打開下載視窗並且指定檔案名稱

 Content-Disposiiotn:attachment; filename="test.zip" 

• Set-Cookie: 把 cookie 設定在瀏覽器上面
  當下一次request的時候，會將 cookie header送回 server端
• X-Frame-Options 可以避免自己的網頁被放在別人的iframe裏面 (需同網域才可放)
• Access-Control-Allow-Origin (允許跨域存取的網域名稱)
  全部的網域使用 * 代表
  script & link 不再此限 (因此JSON可實現跨域存取)

同源政策

• 代表 無法從 A網站 去存取 B網站的 JSON檔
• 解1: 後端設定 Access-Control-Allow-Origin Header (推薦)
• 解2: JSONP (將 JSON 轉換成 JavaScript) (較少用)

HTTP 1.1 快取機制

• 初探 HTTP 1.1 Cache 機制